import React from 'react';
import { Card } from 'react-bootstrap';
import Ec from './Ec'

const student_consumption = [36, 23.0, 31.699999999999999, 27.100000000000001, 45.900000000000006, 11.5, 43.299999999999997, 5.0, 21, 18, 64.400000000000006, 37.700000000000003, 39.0, 32.5, 28.799999999999997, 61, 33, 29.100000000000001, 46.700000000000003, 48.700000000000003, 30.199999999999999, 31.800000000000001, 53, 79, 70, 35.700000000000003, 44.5, 41.299999999999997, 49.200000000000003, 51.5, 53, 63.399999999999999, 38.200000000000003, 40, 44, 57.399999999999999, 53.0, 42.300000000000004, 143.0, 34.299999999999997, 77, 26, 17.899999999999999, 31.449999999999999, 25, 28.699999999999999, 19.600000000000001, 67, 70, 57.299999999999997, 61.600000000000001, 76.200000000000003, 33.600000000000001, 86.849999999999994, 60, 70, 52.400000000000006, 79.400000000000006, 57.200000000000003, 51.0];
const class_consumption = [84, 24.0, 29.0, 31.5, 26.5, 28.0, 32.299999999999997, 6.5, 80, 27, 58, 52.5, 47.5, 32.399999999999999, 19.600000000000001, 21, 29, 47.799999999999997, 42.399999999999999, 36.799999999999997, 90.400000000000006, 25, 27, 23, 36, 32.600000000000001, 45.899999999999999, 61.100000000000001, 31.899999999999999, 37.399999999999999, 59, 52, 26, 86, 32, 41.600000000000001, 42.5, 36.399999999999999, 24, 22.0, 59, 12.0, 53.700000000000003, 18, 27, 35.899999999999999, 43.799999999999997, 23, 62, 47.600000000000001, 29.5, 44.700000000000003, 33.0, 38.600000000000001, 48, 16.600000000000001, 52.200000000000003, 37.899999999999999, 33.099999999999994, 36.099999999999994];
const xlabel = ['2018/9/1', '2018/9/2', '2018/9/3', '2018/9/4', '2018/9/5', '2018/9/6', '2018/9/7', '2018/9/8', '2018/9/9', '2018/9/10', '2018/9/11', '2018/9/12', '2018/9/13', '2018/9/14', '2018/9/15', '2018/9/16', '2018/9/17', '2018/9/18', '2018/9/19', '2018/9/20', '2018/9/21', '2018/9/22', '2018/9/23', '2018/9/24', '2018/9/25', '2018/9/26', '2018/9/27', '2018/9/28', '2018/9/29', '2018/9/30', '2018/10/1', '2018/10/2', '2018/10/3', '2018/10/4', '2018/10/5', '2018/10/6', '2018/10/7', '2018/10/8', '2018/10/9', '2018/10/10', '2018/10/11', '2018/10/12', '2018/10/13', '2018/10/14', '2018/10/15', '2018/10/16', '2018/10/17', '2018/10/18', '2018/10/19', '2018/10/20', '2018/10/21', '2018/10/22', '2018/10/23', '2018/10/24', '2018/10/25', '2018/10/26', '2018/10/27', '2018/10/28', '2018/10/29', '2018/10/30'];
const custom_lower = [20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20];
const custom_upper = [45, 45, 45, 45, 45, 45, 45, 45, 45, 45, 45, 45, 45, 45, 45, 45, 45, 45, 45, 45, 45, 45, 45, 45, 45, 45, 45, 45, 45, 45, 45, 45, 45, 45, 45, 45, 45, 45, 45, 45, 45, 45, 45, 45, 45, 45, 45, 45, 45, 45, 45, 45, 45, 45, 45, 45, 45, 45, 45, 45];

export default function(){
    const option = {
        legend: {
            data: ['学生消费', '班级消费', '合理消费区间']
        },
        tooltip:{
            axisPointer: {
                type: 'cross'
            } 
        },
        grid: {
            left: 0,
            right: 0,
            top: '15%',
            bottom: 0,
            containLabel: true
        },
        xAxis: {
            type: 'category',
            data: xlabel,
            axisTick: {
                show: false
            },
        },
        yAxis: {
            name: '消费金额',
            type: 'value',
            axisTick: {
                show: false
            },
            splitLine: {
                lineStyle: {
                    color: '#eeeeee',
                    type: 'dashed'
                }
            }
        },
        series: [{
            name: '学生消费',
            itemStyle: {
                color: '#df6b66'
            },
            data: student_consumption,
            type: 'line'
        },{
            name: '班级消费',
            itemStyle: {
                color: '#90ca8f'
            },
            data: class_consumption,
            type: 'line'
        },{
            name: '合理消费区间',
            data: custom_lower,
            type: 'line',
            itemStyle: {
                color: '#bdc0ba',
            },
            lineStyle: {
                    normal: {
                        opacity: 0
                    }
                },
            stack: 'confidence-band',
            symbol: 'none'
        },{
            name: '合理消费区间',
            data: custom_upper,
            type: 'line',
            itemStyle: {
                color: '#bdc0ba',
            },
            lineStyle: {
                    normal: {
                        opacity: 0
                    }
                },
                areaStyle: {
                    normal: {
                        color: '#b0c0ba',
                        opacity: 0.25
                    }
                },
            stack: 'confidence-band',
            symbol: 'none'
        }]
    };
    
    return (
        <Card>
            <Card.Header>
                <h4>3-8 学生历史消费数据</h4>
            </Card.Header>
            <Card.Body>
                <Ec option={option} h = '300px'/>
            </Card.Body>
        </Card>
    )
}